<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.el-page-header__content {
  font-size: 14px;
}

.el-page-header__title {
  font-size: 14px;
}

.hex-form-inf .hex-form-inf-content-show {
  padding: 0 4%;
  background-color: gainsboro;
  border-radius: 8px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}
</style>

<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card" v-if="crud.optPageShow.listPage">
        <div slot="header" class="clearfix">
          <div class="el-page-header__content">应用组列表</div>
        </div>
        <div>
          <!--工具栏-->
          <div class="head-container">
            <crudOperation :permission="permission" :otherOptShow="otherOptShow"/>
          </div>
          <!--表格渲染-->
          <el-table border stripe ref="table" v-if="!this.addDialog" v-loading="crud.loading" :data="crud.data"
                    style="width: 100%;" @select="crud.selectChange" @select-all="crud.selectAllChange"
                    @selection-change="crud.selectionChangeHandler" @filter-change="crud.handleFilterChange"
                    :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }">
            <el-table-column type="selection"/>
            <el-table-column v-if="columns.visible('groupCode')" prop="groupCode" label="应用组编码"/>
            <el-table-column v-if="columns.visible('groupName')" prop="groupName" label="应用组名称"/>
            <el-table-column v-if="show" :show-overflow-tooltip="true" prop="pkId" label="应用组IP"/>
            <el-table-column v-if="columns.visible('threadNum')" prop="threadNum" label="线程数"/>
            <el-table-column v-if="columns.visible('groupDesc')" prop="groupDesc" label="应用组描述"/>

            <el-table-column v-if="columns.visible('upUser')" prop="upUser" label="修改人"/>
            <el-table-column v-if="columns.visible('upTs')" prop="upTs" :show-overflow-tooltip="true" label="更新时间">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.upTs }}</span>
              </template>
            </el-table-column>

          </el-table>
        </div>
      </el-card>
      <el-card class="box-card" v-if="crud.optPageShow.addPage">
        <div slot="header" class="clearfix">
          <div class="el-page-header">
            <div class="el-page-header__left" @click="crud.goBack">
              <i class="el-icon-back"></i>
              <div class="el-page-header__title">返回</div>
            </div>
            <div class="el-page-header__content"><b>应用组编辑</b></div>
          </div>
        </div>
        <div class="dataFrom">
          <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="240px">
            <div>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="应用组编码" prop="groupCode">
                    <el-input v-model="form.groupCode" v-bind:disabled="form.pkId" show-word-limit maxlength="12"/>
                  </el-form-item>
                </el-col>
                <el-col :span="9" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      唯一编码，大写英文字母与数字组成，不能为大小写混合不能多于12个字符串
                    </div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="应用组名称" prop="groupName">
                    <el-input v-model="form.groupName" show-word-limit maxlength="12"/>
                  </el-form-item>
                </el-col>
                <el-col :span="9" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      唯一名称，应用组名称不多于12位
                    </div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="线程数" prop="threadNum">
                    <el-input-number v-model="form.threadNum" :step="1" step-strictly :min="1" style="width: 100%;"
                                     max="10000"/>
                  </el-form-item>
                </el-col>
                <el-col :span="9" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      多个应用共同享有分发任务的线程数量
                    </div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="应用组描述" prop="groupDesc">
                    <el-input type="textarea" v-model="form.groupDesc"/>
                  </el-form-item>
                </el-col>
                <el-col :span="9" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      应用组的描述解释
                    </div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-form>
          <div class="form-operator-button">
            <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
            <el-button @click="crud.goBack">返回</el-button>
          </div>
        </div>

      </el-card>
    </div>

  </div>
</template>
<script>
import crudAppGroup from '@/api/app/appGroup'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/app/appGroup/CRUD.operation'

const queryList = [{'cloumValue': 'groupName', 'cloumName': '应用组名称'}, {
  'cloumValue': 'groupCode',
  'cloumName': '应用组编码'
}]
const defaultCrud = CRUD({
  title: '应用组',
  url: '/api/appGroup/selectPages',
  queryList: queryList,
  crudMethod: {...crudAppGroup}
})
const defaultForm = {
  pkId: null,
  groupName: null,
  threadNum: null,
  groupCode: null,
  groupDesc: null,
  crtTs: null,
  upTs: null,
}
export default {
  name: 'appGroup',
  components: {crudOperation},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    let checkAppGroupData = (rule, value, callback) => {
      var util = {
        isFigure: function (e) {
          return /^[0-9A-Z_|]+$/.test(e);
        }
      }
      if (value == null) {
        value = '';
      }
      let isCorrect = true;
      if (!util.isFigure(value))
        isCorrect = false;
      if (rule.field === 'groupCode') {
        if (value.split(" ").join("").length == 0) {
          callback(new Error("应用组编码不能为空字符串！"));
        } else if (isCorrect == false) {
          callback(new Error("只能输入大写英文字母、下划线、分隔符或数字！"));
        } else {
          this.checkAppGroupData(value, rule.field);
          setTimeout(() => {
            if (this.validCodeStatus) {
              callback();
            } else {
              callback(new Error("重复的应用组编码"));
            }
          }, 1000);
        }
      } else if (rule.field === 'groupName') {
        if (value.split(" ").join("").length == 0) {
          callback(new Error("应用组名称不能为空字符串！"));
        } else {
          this.checkAppGroupData(value, rule.field);
          setTimeout(() => {
            if (this.validNameStatus) {
              callback();
            } else {
              callback(new Error("重复的应用组名称"));
            }
          }, 1000);
        }
      }
    }
    return {
      permission: {
        add: ['appGroup:add'],
        edit: ['appGroup:edit'],
        del: ['appGroup:del'],
        refresh: ['appGroup:refresh']
      },
      otherOptShow: {
        refreshThread: true
      },
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false,
      checkAll: true,
      isIndeterminate: true,
      showQryParamFlag: false,
      addDialog: false,
      rules: {
        groupName: [
          {required: true, message: '请输入应用组名称', trigger: 'blur'},
          {validator: checkAppGroupData, trigger: 'blur'}
        ],
        groupCode: [
          {required: true, message: '请输入应用组编码', trigger: 'blur'},
          {validator: checkAppGroupData, trigger: 'blur'}
        ],
        threadNum: [
          {required: true, message: '请输入线程数', trigger: 'blur'},
        ]
      },
      show: false,
      validCodeStatus: false,
      validNameStatus: false
    }
  },
  computed: {},
  created() {
    this.crud.optPageShow.listPage = true
    this.crud.optPageShow.addPage = false
    this.crud.selections.length = 0;
  },
  methods: {
    onOperInf: function (e) {
      let status = e.target.getAttribute('data-status');
      let previousNode = e.target.previousElementSibling;
      if ("off" == status) {
        previousNode.setAttribute('class', 'hex-form-inf-content-show');
        e.target.setAttribute('data-status', 'on');
      } else {
        previousNode.setAttribute('class', 'hex-form-inf-content');
        e.target.setAttribute('data-status', 'off');
      }
    },
    handleCheckAllChange(val) {
      if (val === false) {
        this.$message({
          message: '请至少选择一列',
          type: 'warning'
        });
        this.allColumnsSelected = true
        return
      }
      for (const key in this.crud.props.tableColumns) {
        this.crud.props.tableColumns[key].visible = val
      }
      this.allColumnsSelected = val
      this.allColumnsSelectedIndeterminate = false
    },
    handleCheckedTableColumnsChange(value) {
      let totalCount = 0
      let selectedCount = 0
      for (const key in this.crud.props.tableColumns) {
        ++totalCount
        selectedCount += this.crud.props.tableColumns[key].visible ? 1 : 0
      }
      if (selectedCount === 0) {
        this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING)
        this.$nextTick(function () {
          item.visible = true
        })
        return
      }
      this.allColumnsSelected = selectedCount === totalCount
      this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
    },
    showQryParams() {
      this.showQryParamFlag = true
    },
    hideQryParams() {
      this.showQryParamFlag = false
    },
    checkAppGroupData(value, field) {
      let param = {};
      let result = false;
      //调用后台接口判断是否重复
      param[field] = value;
      param["pkId"] = this.form.pkId;
      crudAppGroup.checkAppGroupData(param).then(res => {
        if ('groupCode' === field) {
          this.validCodeStatus = res;
        } else {
          this.validNameStatus = res;
        }
      })
    },

  }
}
</script>
